<template>
<div class="div"></div>
</template>

<script lang="ts" setup>

</script>

<style lang="less" scoped>
.div {

  position: relative;

  width: 50px;

  height: 86.6px;

  margin: 50px auto;

}

.div:before {

  content: '';

  display: block;

  position: absolute;

  width: 0;

  height: 0;

  right:50px;

  border-width: 43.3px 25px;

  border-style: solid;

  border-color: transparent red transparent transparent;

}

.div:after {

  content: '';

  display: block;

  position: absolute;

  width: 0;

  height: 0;

  left:50px;

  border-width: 43.3px 25px;

  border-style: solid;

  border-color: transparent transparent transparent red;

  top:0;

}
</style>